<template>
  <div class="classifi" @mousewheel.prevent>
    <div class="head">
      <div class="ift-back" @click="returns"></div>
      <h1>分类</h1>
      <div @click="popularity">
        {{ num == 0 ? "人气" : num == 1 ? "收藏" : "更新" }}
        <span class="ift-down"></span>
      </div>
    </div>
    <div class="have" v-if="num == 0">
      <div class="free">
        <div class="images">
          <div>
            <div
              class="degree-of-heat"
              v-for="(item, index) in image"
              :key="index"
              @click="details(item.id)"
            >
              <img :src="item.url" alt="" />
              <div class="Number-of-people">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="have" v-if="num == 1">
      <div class="free">
        <div class="images">
          <div>
            <div
              class="degree-of-heat"
              v-for="(item, index) in imageCollection"
              :key="index"
              @click="details(item.id)"
            >
              <img :src="item.url" alt="" />
              <div class="Number-of-people">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="have" v-if="num == 2">
      <div class="free">
        <div class="images">
          <div>
            <div
              class="degree-of-heat"
              v-for="(item, index) in imageUpdate"
              :key="index"
              @click="details(item.id)"
            >
              <img :src="item.url" alt="" />
              <div class="Number-of-people">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="choice" v-if="flag">
      <ul>
        <li @click="numone"><p>人气</p></li>
        <li @click="numtwo"><p>收藏</p></li>
        <li @click="numthee"><p>更新</p></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
      image: [
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 3,
          flag: false,
          name: "绝世战魂",
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
      ],
      imageCollection: [
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 2,
          flag: false,
          name: "凤逆天下",
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
      ],
      imageUpdate: [
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
        {
          id: 1,
          flag: false,
          name: "斗破苍穹",
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
          imags: false,
        },
      ],
      flag: false,
    };
  },
  methods: {
    details(id) {
      this.$router.push({ name: "details", query: { id: id } });
    },
    numone() {
      this.num = 0;
      this.popularity();
    },
    numtwo() {
      this.num = 1;
      this.popularity();
    },
    numthee() {
      this.num = 2;
      this.popularity();
    },
    popularity() {
      this.flag = !this.flag;
    },
    returns() {
      this.$router.go("-1");
    },
  },
};
</script>
<style lang="less">
.classifi {
  .head {
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    .cancel {
      font-size: 14px;
      color: black;
    }
    div {
      width: 60px;
      font-size: 20px;
      color: #fc6976;
      padding: 0 10px;
      &:nth-child(3) {
        font-size: 12px;
        color: black;
        span {
          color: #fc6976;
        }
      }
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
    }
  }
  .have {
    .free {
      width: 94%;
      margin: 10px auto;
      border-radius: 5px;
      padding-top: 60px;
      .images {
        text-align: center;
        .degree-of-heat {
          float: left;
          margin: 0 1.6% 15px;
          width: 30%;
          position: relative;
          .choice {
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            position: absolute;
            bottom: 20%;
            right: 0;
            padding: 1px;
            border-radius: 50%;
            p {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              margin: 0;
              font-size: 12px;
              &:nth-child(1) {
                background-color: rgba(0, 0, 0, 0.6);
                box-sizing: border-box;
                border: 1px solid white;
              }
              &:nth-child(2) {
                background-color: #fc6976;
                color: white;
              }
            }
          }
          img {
            width: 100%;
            height: 70%;
          }
          .img {
            width: 100%;
            padding-bottom: 133%;
            box-shadow: 0 0 10px #f5c4d2;
            position: relative;
            i {
              position: absolute;
              left: 50%;
              top: 50%;
              font-size: 40px;
              color: #ffd6d3;
              transform: translate(-50%, -50%);
            }
          }
          .Number-of-people {
            padding: 5px 2px;
            color: #999;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span {
              margin-right: 2px;
            }
          }
        }
        .add {
          width: 28%;
          font-size: 14px;
          margin-bottom: 15%;
        }
      }
    }
  }
  .choice {
    position: fixed;
    top: 45px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    ul {
      margin: 5px;
      float: right;
      width: 100px;
      text-align: center;
      background-color: white;
      font-size: 14px;
      box-shadow: 0 0 25px white;
      border-radius: 5px;
      li {
        border-bottom: 1px solid #ddd;
        &:last-child {
          border: none;
        }
        p {
          margin: 5px 0;
        }
      }
    }
  }
}
</style>